<template>
  <div class="view-wrapper">
    <div class="head_box">
      <!-- 当前商户数据 -->
      <div class="head_item_box">
        <div class="item_head">
          <div class="item_head_title">当前商户数据</div>
          <div class="item_head_num_box">
            <img src="@/static/summary01.png" alt="">
            <div class="item_head_num">{{ merchantCountDTO.merchantCount }}</div>
          </div>
        </div>
        <div class="item_line"></div>
        <div class="item_footer">
          <div class="item_footer_left">昨日入驻：+{{ merchantCountDTO.yesterdayCount }}</div>
          <div class="item_footer_right">待使用：{{ merchantCountDTO.toBeUsedCount }}</div>
        </div>
      </div>
      <!-- 当前用户数据 -->
      <div class="head_item_box">
        <div class="item_head">
          <div class="item_head_title">当前用户数据</div>
          <div class="item_head_num_box">
            <img src="@/static/summary02.png" alt="">
            <div class="item_head_num">{{ customerCountDTO.customerCount }}</div>
          </div>
        </div>
        <div class="item_line"></div>
        <div class="item_footer">
          <div class="item_footer_left">昨日注册：{{ customerCountDTO.yesRegisterCount }}</div>
          <div class="item_footer_right">实名用户：{{ customerCountDTO.realNameCount }}</div>
        </div>
      </div>
      <!-- 当前资产存量（CoCo） -->
      <div class="head_item_box">
        <div class="item_head">
          <div class="item_head_title">当前资产存量（CoCo）</div>
          <div class="item_head_num_box">
            <img src="@/static/summary03.png" alt="">
            <div class="item_head_num">{{ cocoDTO.total }}</div>
          </div>
        </div>
        <div class="item_line"></div>
        <div class="item_footer">
          <div class="item_footer_left">产出：{{ cocoDTO.output }}</div>
          <div class="item_footer_right">销毁：{{ cocoDTO.used }}</div>
        </div>
      </div>
      <!-- 当前存管总额（￥） -->
      <div class="head_item_box">
        <div class="item_head">
          <div class="item_head_title">当前存管总额（￥）</div>
          <div class="item_head_num_box">
            <img src="@/static/summary04.png" alt="">
            <div class="item_head_num">{{ walletDTO.total }}</div>
          </div>
        </div>
        <div class="item_line"></div>
        <div class="item_footer">
          <div class="item_footer_left">昨日存管：{{ walletDTO.yesDepository }}</div>
          <div class="item_footer_right">昨日释放：{{ walletDTO.yesRelease }}</div>
        </div>
      </div>
    </div>
    <div class="initChart" v-loading="loadingEcharts">
      <div class="initChart_head">
        <div class="initChart_head_title">订单数据统计</div>
        <div class="initChart_head_lable">交易时间</div>
        <div class="initChart_head_time">
          <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :clearable="true" unlink-panels>
          </el-date-picker>
        </div>
        <div class="initChart_head_but">
          <el-button type="primary" @click="query">查询</el-button>
          <!-- <el-button type="primary">重置</el-button> -->
        </div>
      </div>
      <TabularData style="width: 100%;height: 250px;" ref="TabularData"> </TabularData>
    </div>

    <div class="footer_box">
      <div class="footer_left">
        <div class="footer_left_head">
          <div class="footer_left_head_word">快捷入口</div>
          <i class="el-icon-circle-close" v-if="isEdit && quickList.length > 0" @click="changeClose"></i>
          <img src="@/static/edit_index.png" alt="" v-else-if="quickList.length > 0" @click="changeClose">
        </div>
        <div class="footer_left_body">
          <div class="footer_left_body_no" @click="addQuick" v-if="quickList.length == 0">
            <i class="el-icon-plus"></i>
          </div>
          <div class="footer_left_body_info" v-if="quickList.length > 0">
            <draggable v-model="quickList" :sort="isEdit" chosenClass="chosen" forceFallback="true" group="advertising"
              animation="1000" @start="quickStart" @end="quickEnd" :move="checkMove">
              <transition-group>
                <div class="info_item" v-for="(item, index) in quickList" :key="index + 'q'" @click="jumpUrl(item)">
                  <div class="info_item_img">
                    <img class="info_item_img_bg" :src="item.logo" alt="">
                    <div class="info_item_icon" v-if="isEdit">
                      <i class="el-icon-edit-outline" @click.stop="editQuick(item)"></i>
                      <i class="el-icon-delete" @click.stop="delQuick(item)"></i>
                    </div>
                  </div>
                  <span>{{ item.name }}</span>
                </div>
                <div class="info_item" @click="addQuick" :key="'qq'">
                  <div class="info_item_img">
                    <img class="info_item_img_bg" :src="require('@/static/index_add.png')" alt="">
                  </div>
                  <span class=""></span>
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>

      </div>
      <!-- 待办事项 -->
      <div class="footer_right">
        <div class="footer_right_body">
          <div class="footer_right_h">
            <div class="footer_right_hl">
              <span>待办事项</span>
              <span style="color: #ff4848">({{ countInformation.total }})</span>
            </div>
            <div class="footer_right_hr" @click="jump">
              <span>进入待办中心</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="footer_right_b" v-loading="listLoading">
            <el-tabs @tab-click="handleClick">
              <el-tab-pane>
                <span slot="label">全部</span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL ellipseHide">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  商家入驻
                  <span class="num1" v-if="countInformation.merchantApplyNum > 0">({{ countInformation.merchantApplyNum
                  }})</span></span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  合同审批
                  <span class="num1" v-if="countInformation.merchantEquityCardContractNum > 0">({{
                    countInformation.merchantEquityCardContractNum
                  }})</span></span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  提现异常<span class="num1" v-if="countInformation.withdrawErrorNum > 0">({{
                    countInformation.withdrawErrorNum }})</span></span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  预警消息<span class="num1" v-if="countInformation.warningMessageNum > 0">({{
                    countInformation.warningMessageNum }})</span></span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  神椰订单<span class="num1" v-if="countInformation.shenyeOrderNum > 0">({{ countInformation.shenyeOrderNum
                  }})</span></span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL ellipseHide">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  结算申请<span class="num1" v-if="countInformation.shenyeSettleNum > 0">({{ countInformation.shenyeSettleNum
                  }})</span></span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL ellipseHide">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  赚卡退款<span class="num1" v-if="countInformation.merchantEquityCardRefundNum > 0">({{
                    countInformation.merchantEquityCardRefundNum
                  }})</span></span>
                <div class="table_ls" v-for="(item, index) in list" :key="index">
                  <div class="table_lsL ellipseHide">
                    <span class="table_lsL_type">【{{ item.businessTypeDict }}】</span>
                    <span>{{ item.jobName }}</span>
                  </div>
                  <div class="table_lsR">
                    <span @click="handle(item)">去处理</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="table_null" v-if="list.length == 0">暂无数据</div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <quick-dialog :id="quickId" @success="quickSuccess" v-if="quickStatus" :visible.sync="quickStatus"></quick-dialog>
  </div>
</template>

<script>
import { waitingProcessNum, getIndex, getplatformMCCountV2, waitingCenterGetBillSummaryV2, delQuickEntryV1, quickEntryV1GetList, editSortQuickEntryV1 } from "@/api/index";
import TabularData from './components/TabularData.vue'
import QuickDialog from './components/QuickDialog.vue'
import draggable from 'vuedraggable' //拖动组件

export default {
  name: 'BeeTokenSystemH5Index',
  components: {
    TabularData,
    QuickDialog,
    draggable
  },
  data() {
    return {
      isEdit: false,
      loading: false,
      loadingEcharts: false,
      listLoading: false, //代办事项加载中
      tabularDataStatus: false,
      date: [], //开始时间 、结束时间
      billSummary: {}, //数据汇总
      countInformation: {}, //代办任务未处理
      list: [], //代办数据列表
      quickList: [], //快捷入口列表
      quickStatus: false, //快捷添加是否添加状态
      quickId: '', //快捷入口编辑id
      merchantCountDTO: [], //当前商户数据
      customerCountDTO: [], //当前用户数据
      cocoDTO: [], //当前资产存量（CoCo）
      walletDTO: [], //当前存管总额（￥）
      status: 1, //处理状态 1：待处理 2：已处理
    };
  },
  created() {
    this.countByType();
    this.getplatformMCCount()
    this.getWaitingCenterGetBillSummary();
    this.getQuickEntryV1GetList()
    this.getlist();

  },
  methods: {
    //管理中台首页 当前商户数据、当前用户数据、当前资产存量（CoCo）、当前存管总额（￥）
    getplatformMCCount() {
      getplatformMCCountV2().then((res) => {
        let { merchantCountDTO, customerCountDTO, cocoDTO, walletDTO } = res.result;
        this.merchantCountDTO = merchantCountDTO
        this.customerCountDTO = customerCountDTO
        this.cocoDTO = cocoDTO
        this.walletDTO = walletDTO
      });
    },
    // 交易数据汇总
    getWaitingCenterGetBillSummary() {

      var params = {
        startTime: this.date[0],
        endTime: this.date[1],
      }
      this.loadingEcharts = true
      //用户数量和商家数量
      waitingCenterGetBillSummaryV2(params).then((res) => {
        this.billSummary = res.result
        setTimeout(() => {
          this.loadingEcharts = false
          this.$refs.TabularData.getDataList(this.billSummary)
        }, 500)
      }).catch(error => {

      })
    },
    // 查询
    query() {
      if (this.date == null) {
        this.date = []
      }
      this.getWaitingCenterGetBillSummary()
    },
    getlist() {
      const params = {
        businessType: this.businessType,
        status: this.status,
        pageSize: 5,
      };
      //代办任务列表
      this.listLoading = true;
      getIndex(params).then((res) => {
        this.list = res.result.records;
        this.listLoading = false;
      }).catch(error => {
        this.listLoading = false;
      });
    },
    //代办任务未处理条数
    countByType() {
      this.loading = true;
      const params = {
        merchantName: '',
        status: this.status,
      };
      waitingProcessNum(params).then((res) => {
        this.countInformation = res.result;
        this.loading = false;
      });
    },
    // 代办数据切换
    handleClick(tab) {
      let index = tab.index;
      // if (index == 0) { //全部
      //   this.businessType = "";
      // } else if (index == 1) { //商家入驻
      //   this.businessType = 1;
      // } else if (index == 2) {
      //   this.businessType = 5;
      // } else if (index == 3) {
      //   this.businessType = 6;
      // } else if (index == 4) {
      //   this.businessType = 7;
      // } else if (index == 5) {
      //   this.businessType = 8;
      // }
      if (index == 0) { //全部
        this.businessType = "";
      } else if (index == 1) { //商家入驻
        this.businessType = 1;
      } else if (index == 2) { //合同审批
        this.businessType = 9;
      } else if (index == 3) { //提现异常
        this.businessType = 5;
      } else if (index == 4) { //预警信息
        this.businessType = 6;
      } else if (index == 5) { //神椰订单
        this.businessType = 7;
      } else if (index == 6) { //结算申请
        this.businessType = 8;
      } else if (index == 7) { //赚卡退款
        this.businessType = 10;
      }
      this.getlist();
    },
    // 代办数据跳转
    handle(item) {
      if (item.businessType == 1) {
        this.$router.push({ path: "/merchants/merchantsAudit", query: { id: 1 } });
      } else if (item.businessType == 5) {
        this.$router.push({ path: "/moneyManagement/withdrawal-list", query: { id: 1 } });

      } else if (item.businessType == 6) {
        let url = ''
        if(item.sideId=='2'){ //保险端
          url = process.env.VUE_APP_INSURANCE + 'login'
        }else{ //监管端
          url = process.env.VUE_APP_SUPERVISE + 'login'
        }
        window.open(url, 'target');
      } else if (item.businessType == 7) {
        // 神椰乐园
        if (item.jobName.includes('椰椰邮差')) {
          this.$router.push({ path: "/consumeMiningManagement/onlineClockingActivity", query: { id: 3 } });
        } else if (item.jobName.includes('集市兑换')) {
          // 集市兑换
          this.$router.push({ path: "/commodityExchange", });
        }
      } else if (item.businessType == 8) {
        this.$router.push({ path: "/TodoCenter", query: { id: 6 } });
      } else if (item.businessType == 9) { //合同审批
        this.$router.push({ path: "/merchants/contractReview" });
      } else if (item.businessType == 10) { //赚卡退款
        this.$router.push({ path: "/zhuanReturn" });
      }
    },
    jump() {
      this.$router.push({ path: "/TodoCenter" });
    },
    // 快捷入口跳转
    jumpUrl(item) {
      if (this.isEdit == false) {
        this.$router.push({ path: item.url });
      }
    },
    // 快捷添加列表
    getQuickEntryV1GetList() {
      quickEntryV1GetList().then(res => {
        this.quickList = res.result
      })
    },
    // 快捷添加成功
    quickSuccess() {
      this.getQuickEntryV1GetList()
      this.isEdit = false
    },
    // 关闭开启编辑快捷
    changeClose() {
      this.isEdit = !this.isEdit
    },
    // 编辑快捷菜单
    editQuick(item) {
      this.quickId = item.id
      this.quickStatus = true
    },
    // 删除快捷菜单
    delQuick(item) {
      this.$confirm(`是否删除(${item.name})快捷入口?`, '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        delQuickEntryV1(item.id).then(res => {
          // this.handleSuccess('已拒绝' + this.name + '资产增发申请')
          this.$message.success('删除成功!');
          setTimeout(() => {
            this.getQuickEntryV1GetList()
          }, 500)
        })
      }).catch()
    },
    // 添加快捷菜单
    addQuick() {
      this.quickId = ''
      this.quickStatus = true
    },
    //开始拖拽事件
    quickStart() {
      this.drag = true
    },
    //拖拽结束事件
    quickEnd() {
      this.drag = false
      var list = []
      this.quickList.forEach(item => { list.push(item.id) })
      // 编辑 快捷入口排序
      editSortQuickEntryV1(list).then(res => { })
    },
    checkMove(e) {
      let evl = e.draggedContext.index
      if (evl == this.quickList.length) return false;
      return true
    },
  },
};
</script>

<style lang="scss" scoped>
// .app-main{
//   min-width: 1400px;
// }
.view-wrapper {
  .head_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .head_item_box {
      width: 23%;
      min-width: 300px;
      padding: 15px 15px 20px 15px;
      box-sizing: border-box;
      border-radius: 10px;
      background: #ffffff;

      .item_head {
        // display: flex;
        margin-bottom: 18px;

        .item_head_title {
          font-size: 16px;
          font-weight: 400;
          line-height: 22px;
          color: #747474;
          margin-bottom: 25px;
        }

        .item_head_num_box {
          display: flex;
          flex-direction: row;

          img {
            width: 38px;
            height: 38px;
            margin-right: 22px;
          }

          .item_head_num {
            flex: 1;
            font-size: 36px;
            font-weight: 500;
          }
        }
      }

      .item_line {
        width: 100%;
        margin: 0 15px;
        border-bottom: 1px solid #EFEFEF;
        margin: 0 auto;
      }

      .item_footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 16px;
        line-height: 22px;
        margin-top: 20px;
        color: #222222;

        .item_footer_right {
          margin-right: 10px;
        }

      }
    }
  }

  // 表格统计
  .initChart {
    width: 100%;
    padding: 20px;
    // height: 380px;
    background: #ffffff;
    border-radius: 14px;
    box-sizing: border-box;
    margin-top: 30px;

    .initChart_head {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 40px;
      margin-bottom: 46px;

      .initChart_head_title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin-right: 15px;
      }

      .initChart_head_lable {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        margin-right: 13px;
      }

      .initChart_head_time {
        margin: 0 8px;
      }

      .initChart_head_but {
        margin-left: 24px;
      }

    }
  }

  // 代办中心
  .footer_box {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 30px;
    width: 100%;
    height: 309px;
  }

  .footer_left {
    min-width: 376px;
    width: 23%;
    height: 100%;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
  }

  .footer_left_head {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 15px 20px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
  }

  .footer_left_head_word {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
  }

  .footer_left_head img {
    width: 22px;
    height: 22px;
    cursor: pointer;
  }

  .footer_left_head .el-icon-circle-close {
    color: #262626;
    font-size: 28px;
    cursor: pointer;
  }

  .footer_left_body {
    flex: 1;
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
  }

  .footer_left_body::-webkit-scrollbar {
    width: 0;
  }

  .footer_left_body_no {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 8px;
    background: #F6F8FC;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer_left_body_no i {
    font-size: 30px;
    color: #D3D6DB;
  }

  .footer_left_body_info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .info_item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 60px;
    height: 90px;
  }

  .info_item_img {
    width: 60px;
    height: 60px;
    position: relative;
  }

  .info_item_img .info_item_img_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .info_item_icon {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    // background:rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    font-size: 20px;
    color: #222222;
  }

  .info_item_img .el-icon-delete {
    position: absolute;
    right: -5px;
    top: -7px;
    z-index: 6;
  }

  .info_item_img .el-icon-edit-outline {
    font-size: 20px;
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .info_item span {
    font-size: 15px;
    width: 60px;
    height: 21px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }



  .info_item span {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    color: #222222;
    margin-top: 8px;
  }

  .footer_right {
    flex: 1;
    // width: 70%;
    min-width: 900px;
    margin-right: 30px;
  }

  .footer_right_body {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    // margin-left: 24px;
    // // background-color: #fff;
    box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .ellipseHide {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .footer_right_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 14px 20px;
    box-sizing: border-box;
    background: #ffffff;
  }

  .footer_right_hl {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #303133;
    font-weight: bold;
  }

  .footer_right_hr {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 15px;
    color: #248afe;
    cursor: pointer;
  }

  .footer_right_hr i {
    font-size: 13px;
    margin-top: 2px;
  }

  .footer_right_hr:hover {
    opacity: 0.8;
  }

  .footer_right_hr img {
    width: 10px;
    height: 10px;
    margin-left: 4px;
  }

  .table_box {
    display: flex;
    align-items: center;
    border-radius: 2px;
  }

  .table_ls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #303133;
    margin-bottom: 12px;
  }

  .tableLs:last-child {
    margin-bottom: 0px;
  }

  .num1 {
    color: #ff4848;
  }

  .footer_right_b {
    flex: 1;
    background: #ffffff;
  }

  .footer_right_b::v-deep .el-tabs__item {
    font-size: 15px;
    height: 48px;
    line-height: 48px;
  }

  .footer_right_b::v-deep .el-tabs__item.is-active {
    color: #3284FF;
  }

  .footer_right_b::v-deep .el-tabs__item:hover {
    color: #3284FF;
  }

  .footer_right_b::v-deep .el-tabs__header {
    background: #F6F8FC;
    // padding-left: 69px;
    box-sizing: border-box;
    margin: unset;
  }

  .footer_right_b::v-deep .el-tabs__content {
    padding: 29px 31px 30px 20px;
    box-sizing: border-box;
  }

  .footer_right_b::v-deep .el-tabs__nav-wrap::after {
    background-color: unset;
  }

  .footer_right_b::v-deep .el-tabs__item {
    padding: 0 28px;
  }

  .table_lsR {
    font-size: 12px;
    color: #ff4848;
  }

  .table_lsR:hover {
    cursor: pointer;
    opacity: 0.8;
  }

  .table_lsL {
    color: #303133;
    font-size: 15px;
    width: 90%;
  }

  .table_lsL_type {
    margin-right: 16px;
  }

  .table_lsR i {
    margin-left: 6px;
  }

  .rank_box {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .rank_boxls {
    width: 49.2%;
    // height: 484px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
    padding-bottom: 16px;
    height: 500px;
  }

  .table_null {
    font-size: 15px;
    color: #303133;
    text-align: center;
    padding-top: 62px;
  }

}</style>